<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图标库</title>
    <script type="text/javascript" src="../static/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../static/js/clipboard.min.js"></script>
    <link rel="stylesheet" href="../static/css/doc.css">
    <link rel="stylesheet" href="../static/css/ecmp-all-min.css">
    <script>
        function search(){
            var searchName=document.getElementById("name").value;
            if(searchName){
                $(".icon_lists li").hide().filter(function (p1, p2, p3) {
                    var cn_name = $("div.name",this).html();
                    var en_name = $("div.fontclass",this).html();
                    return isContains(cn_name,searchName)|| isContains(en_name,searchName);
                }).show();
            }else{
                $(".icon_lists li").show();
            }
           // console.log(searchName);
        }
        function isContains(str, substr) {
            return str.indexOf(substr) >= 0;
        }
        document.onkeydown=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if(e && e.keyCode==13){ // enter 键
                search();
            }
        };
        $(document).ready(function(){
            $("ul>li").hover(
                function () {
                    $("div.icon-cover",this).show();
                },
                function () {
                    $("div.icon-cover",this).hide();
                }
            );

            var clipboard = new Clipboard('.copy-before');
            clipboard.on('success', function(e) {
                var s = $(e.trigger);
                s.html("复制成功");
                s.addClass("copy-success");
                setTimeout(function () {
                    s.html("复制代码");
                    s.removeClass("copy-success");
                }, 500);
            });
            clipboard.on('error', function(e) {
                var s = $(e.trigger);
                s.html("复制失败");
                s.addClass("copy-failure");
                setTimeout(function () {
                    s.html("复制代码");
                    s.removeClass("copy-failure");
                }, 500);
            });
        });
    </script>
</head>
<body>
<div style="float: left;margin-left: 140px;margin-top: 20px;">
    <span style="font-size: 26px;">ECMP平台图标库</span>
</div>
<div class="unit-centered">
    <div class="sbox unit-centered">
        <div style="height: 40px;position: relative;" >
            <span class="ecmp-common-search customer-search" style="right:11px;position: absolute;cursor: pointer;z-index: 999;" onclick="search()"></span>
            <input id="name" class="sinput inputstyle" placeholder="输入图标名称进行搜索..." type="text">
        </div>
        <div style="height: 40px;position: relative;margin-top: 20px;" >
            <div style="float: right;">
                <a href="upload" style="font-size: 20px;"><u><i class="ecmp-common-upload"></i>上传图标</u></a>
            </div>
        </div>
    </div>
</div>

<div class="main markdown">
    <%
    var iconDatas={};
    icons.forEach(function(icon) {
        var iconName = icon.replace(/\.\w+$/, '');
        var firstIndex = iconName.indexOf("_");
        var lastIndex = iconName.lastIndexOf("_");
        if(!iconDatas[iconName.substring(0,firstIndex)]){
            iconDatas[iconName.substring(0,firstIndex)]={
                name:iconGroup[iconName.substring(0,firstIndex)]["name"],
                data:[{
                    icon_cn:iconName.substring(firstIndex+1,lastIndex),
                    icon_en:iconGroup[iconName.substring(0,firstIndex)]["prefix"]+"-"+iconName.substring(lastIndex+1)
                 }]
            };
        }else{
            iconDatas[iconName.substring(0,firstIndex)].data.push({
                icon_cn:iconName.substring(firstIndex+1,lastIndex),
                icon_en:iconGroup[iconName.substring(0,firstIndex)]["prefix"]+"-"+iconName.substring(lastIndex+1)
            });
        }
    });
    %>
    <%
    for(var x in iconDatas) {
        var iconObject = iconDatas[x];
        //console.log(iconObject.name);
    %>
    <h1><%= iconObject.name%></h1>
    <ul class="icon_lists clear">
     <%iconObject.data.forEach(function(ics){ %>
        <li style="position: relative;">
            <i class="icon ecmp-<%= ics.icon_en %>"></i>
            <div class="name"><%= ics.icon_cn%></div>
            <div class="fontclass">ecmp-<%= ics.icon_en%></div>
            <div class="icon-cover" style="position: absolute">
                    <span class='copy-before' data-clipboard-text='<i class="ecmp-<%= ics.icon_en%>"></i>'>复制代码</i></span>
            </div>
        </li>

    <% });%>
    </ul>
    <%}%>

    <h2>font-class引用</h2>
    <hr>
    <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
    <p>与unicode使用方式相比，具有如下特点：</p>
    <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
    </ul>
    <p>使用步骤如下：</p>
    <h3>第一步：引入项目下面生成的fontclass代码：</h3>
    <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="../fonticon/css/ecmp-all-min.css"&gt;</span></code></pre>
    <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
    <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">ecmp-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
    <span>  或者</span>
    <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">span</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">ecmp-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">span</span>&gt;</code></pre>

    <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
    </blockquote>

</div>
</body>
</html>